<template>
  <simple-layout title="实名信息">
    <div>
      <div class="real-info"><i></i>实名信息</div>
      <form class="mui-input-group">
        <div class="mui-input-row">
          <label>真实姓名</label>
          <input type="text" class="mui-input-clear" placeholder="请输入真实姓名" v-model="realName">
        </div>
        <div class="mui-input-row">
          <label>身份证号</label>
          <input type="number" class="mui-input-password" placeholder="请输入身份证号" v-model="idCard">
        </div>
      </form>
    </div>

    <div>
      <div class="real-info"><i></i>上传身份证</div>
      <div class="push-phone">
        <div>点击上传人面像</div>
        <div>
          <img src="../../assets/updateRealInfo/shen fen zheng@3x.png" alt="">
        </div>
      </div>
      <div class="phone-info">
        <div>拍摄时，请确保身份证边框完整，字体清晰，亮度清晰</div>
        <div class="phone-info-tip">
          <div>
            <img src="../../assets/updateRealInfo/biankuangqueshi.png" alt="" class="info-tip-img">
            <div><img src="../../assets/updateRealInfo/gou.png" alt="">标准拍摄</div>
          </div>
          <div>
            <img src="../../assets/updateRealInfo/biankuangqueshi.png" alt="" class="info-tip-img">
            <div><img src="../../assets/updateRealInfo/cha.png" alt="">边框缺失</div>
          </div>
          <div>
            <img src="../../assets/updateRealInfo/zhaopianmohu.png" alt="" class="info-tip-img">
            <div><img src="../../assets/updateRealInfo/cha.png" alt="">照片模糊</div>
          </div>
          <div>
            <img src="../../assets/updateRealInfo/guangxiantaian.png" alt="" class="info-tip-img">
            <div><img src="../../assets/updateRealInfo/cha.png" alt="">光线太暗</div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <button type="button" class="ab-btn ab-btn-primary">提交认证</button>
    </div>
  </simple-layout>
</template>


<script>
  import SimpleLayout from '../../components/SimpleLayout';

  export default {
    name: "Login",
    components: {
      //someComponent
      SimpleLayout
    },
    props: {},
    data() {
      return {
        msg: "Hello Vue.js",
        realName:null,
        idCard: null,
      }
    },
    computed: {},
    watch: {},
    mounted: function () {
    },
    methods: {
    }
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .phone-info-tip{
    display: flex;
    justify-content: space-around;
    margin: 1rem 0 2rem;
  }
  .ab-btn.ab-btn-primary {
    width: 80%;
    background: #9090da;
    font-size: 20px;
    color: #fff;
    border-radius: 17px;
    line-height: 2.5rem;
  }
  .phone-info{
    font-size: 18px;
    padding: 1rem;
  }
  .push-phone{
    display: flex;
    padding: 1rem 1rem 2rem;
    border-bottom: 1px solid #e6dfdf;
  }
  .push-phone>*,  .push-phone>img{
    width: 49%;
  }
  .push-phone>div:first-child{
    margin: auto 0;
    font-size: 22px;
  }
  .push-phone>div >img {
    width: 100%;
  }
  .real-info{
    text-align: initial;
    line-height: 3.4rem;
    padding: 0 2rem 0.5rem;
    background: #f7f7f7;
    height: 3rem;
    color: #9090da;
    font-size: 20px;
    font-weight: bold;

  }
  .real-info>i{
    display: inline-block;
    height: 16px;
    width: 5px;
    position: relative;
    top: 2px;
    margin-right: 5px;
    background: #7B7FEE;
  }
  .mui-input-group .mui-input-row{
    border-top: 1px solid #ccc;
  }
  .mui-input-group:before,.mui-input-group:after,.mui-input-group .mui-input-row:after {
    height: 0;
  }
  .mui-input-row label{
    color: #9090da;
    font-weight: bold;
    font-size: 20px;
  }
</style>
